<template>
	<div class="addvideo">
		<h1>相册列表</h1>
		<template>
			<el-table :data="ImgList" style="width: 100%">
				<el-table-column prop="mainpicture" label="主图" align="center" width="180">
					<template slot-scope="scope">
						<img :src="scope.row.mainImg" style="width: 100px;height: 100px;object-fit: cover;border:1px solid #CCCCCC;" />
					</template>
				</el-table-column>
				<el-table-column prop="mainpicture" label="用户iD" align="center" width="180">
					<template slot-scope="scope">
						<i>{{scope.row.userid}}</i>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="类型" align="center" width="180">
					<template slot-scope="scope">
						<span v-if="scope.row.type==0">活动相册</span>
						<span v-else-if="scope.row.type==1">婚礼相册</span>
						<span v-else>相册</span>
					</template>
				</el-table-column>

				<el-table-column prop="address" align="center" width="300" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="addImg(scope.row.type,scope.row.userid)">编辑相册</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	import E from "wangeditor";
	import $ from "jquery";
	import Qiniu from "../../../static/js/qiniu";
	export default {
		data() {
			return {
				ImgList: [],
				id: '',
				img: [],
				noImg: [{
						mainImg: '',
						type: 0
					},
					{
						mainImg: '',
						type: 1
					},
					{
						mainImg: '',
						type: 2
					}
				]
			};
		},
		mounted() {
			this.id = this.$route.query.id;
			for (let i in this.noImg) {
				this.$set(this.noImg[i], 'userid', this.id)
			}
			console.log(this.noImg)
			if (this.$route.query.id != undefined) {
				this.api.get("/api/photo?userid=" + this.$route.query.id).then(res => {
					console.log(res.data,'112121')
					if (res.code == 200) {
						let newInfo = [];
						res.data.filter(item => {
							let param = {
								mainImg: item.mainpicture,
								type: item.type,
								userid: item.userid
							}
							newInfo.push(param)
						})
						for (var i = 0; i < newInfo.length; i++) {
							for (var j = i + 1; j < newInfo.length;) {
								if (newInfo[i].type == newInfo[j].type) { //通过type属性进行匹配；
									newInfo.splice(j, 1); //去除重复的对象；
								} else {
									j++;
								}
							}
						}
						console.log(newInfo)

						if (newInfo.length >= 1 || newInfo.length < 3) { //添加了一个或者两个相册
							for (let n = 0; n < newInfo.length; n++) {
								this.noImg.unshift(newInfo[n])  //把添加的数据存在 this.noImg里面
							}
							for (var i = 0; i < this.noImg.length; i++) { //把this.noImg里面重复类型的相册去除
								for (var j = i + 1; j < this.noImg.length;) {
									if (this.noImg[i].type == this.noImg[j].type) { //通过type属性进行匹配；
										this.noImg.splice(j, 1); //去除重复的对象；
									} else {
										j++;
									}
								}
							}
							this.ImgList=this.noImg
							console.log(this.noImg)
						} else if (newInfo.length<1) { //没有添加相册
							this.ImgList = this.noImg
						}else{ //添加了三个相册
							this.ImgList = newInfo;
						}
					}
				});
			}
		},
		methods: {
			addImg(type, id) {
				this.$router.push({
					path: './addAlbum',
					query: {
						userid: id,
						type: type
					}
				})
			}
		}
	};
</script>

<style scoped>
</style>
